<template>
  <div class="home">
    <el-container>
      <el-header class="home_hd">
        <!-- 导航  start -->
        <navModule @quit="quitClick"></navModule>
        <!-- 导航  end -->
      </el-header>
      <el-container class="home_ct">
        <!-- 接诊  start -->
        <div class="home_aside">
          <div class="home_aside_box">
            <incompleteCommunication></incompleteCommunication>
          </div>
        </div>
        <!-- 接诊  end -->
        <!-- 列表  start -->
        <div class="home_main">
          <div class="home_main_box">
            <div class="home_mb_menu">
              <menuModule :dataList="dataList"></menuModule>
            </div>
            <div class="home_mb_bd">
              <router-view></router-view>
            </div>
          </div>
        </div>
        <!-- 列表  end -->
        <!-- 接诊操作  start -->
        <div
          class="incomplete_state flexVam cursor zIndex"
          :class="{ 'incomplete_state_start': $store.state.common.STATE == 2}"
          @click="incompleteClick"
        >{{$store.state.common.STATE | stateFil}}</div>
        <!-- 接诊操作  end -->
      </el-container>
    </el-container>
  </div>
</template>
<script>
import incompleteCommunication from "./incompleteCommunication/list";
import menuModule from "./../components/home/menuModule";
import navModule from "./../components/home/navModule";
import {
  getRpcTximUpdateStatus,
  getRpcTximOnline,
  getRpcTximUpdateReids
} from "../requestApi/user";
export default {
  components: {
    menuModule,
    navModule,
    incompleteCommunication
  },
  data() {
    return {
      dataList: [
        {
          path: "/home/depending/list",
          route: "/home/depending/",
          title: "问诊视话记录",
          icon: "",
          isShow: false,
          meta: {
            permission: ["02"]
          }
        },
        {
          path: "/home/prescription/list",
          route: "/home/prescription/",
          title: "处方记录",
          icon: "",
          isShow: false,
          meta: {
            permission: ["03"]
          }
        }
      ],
      RpcTximUpdateReidsTimer: null
    };
  },
  filters: {},
  created: function() {
    let self = this;
    clearInterval(self.RpcTximUpdateReidsTimer);
  },
  mounted() {
    let self = this;
    self.$store.dispatch("GET_DOCTOR", localStorage.getItem("doctorId"));
    if (self.$store.state.common.DoctorId) {
      this.$message({
        iconClass: "el-icon-share",
        customClass: "homeMessage",
        message: "关闭浏览器会影响视频问诊，请慎重关闭浏览器。"
      });
      this.getRpcTximOnlineFun();
    } else {
      this.$message("医生状态异常！暂无法开始接诊");
      self.$store.dispatch("GET_STATE", null);
      self.$store.dispatch("GET_STATE", 2);
      this.basePushFun("/login");
    }
  },
  watch: {
    $route: "routeFun"
  },
  destroyed() {},
  computed: {},
  methods: {
    routeFun() {},
    /* 状态变更  start */
    async getRpcTximUpdateStatusFun(status, type) {
      let self = this;
      localStorage.setItem("DOCTOR_STATE", status);
      let response = await getRpcTximUpdateStatus({
        userId: localStorage.getItem("doctorId"),
        status: status
      });
      if (response.code == 200 && response.data) {
        self.getRpcTximOnlineFun();
        if (type == "quit") {
          clearInterval(self.RpcTximUpdateReidsTimer);
          self.$store.dispatch("GET_TIMLOING_STATE", 5);
        } else {
          self.getRpcTximUpdateReidsFun();
          if (status == 1) {
            self.RpcTximUpdateReidsTimer = setInterval(() => {
              self.getRpcTximUpdateReidsFun();
            }, 10000);
          } else {
            clearInterval(self.RpcTximUpdateReidsTimer);
          }
        }
      } else if (response.code == 500) {
        this.$message({
          type: "error",
          message: response.message
        });
      } else {
        this.$message({
          type: "error",
          message: "系统出小差！"
        });
      }
    },
    // 更新状态通知登录 登出
    statusFun(status) {
      let self = this;
      clearInterval(self.RpcTximUpdateReidsTimer);
      self.$store.dispatch("GET_STATE", null);
      self.$store.dispatch("GET_TIMLOING_STATE", 2);
      if (status == 1) {
        //医生在线
        self.$store.dispatch("GET_STATE", 3);
      } else {
        //医生不在线
        self.$store.dispatch("GET_STATE", 2);
      }
      if (status == 1) {
        self.RpcTximUpdateReidsTimer = setInterval(() => {
          self.getRpcTximUpdateReidsFun();
        }, 10000);
      } else {
        clearInterval(self.RpcTximUpdateReidsTimer);
      }
    },
    // 获取腾讯云签名
    DoctorSigFun(status) {
      let self = this;
      if (self.$store.state.common.DoctorSig) {
        self.statusFun(status);
      } else {
        self.$store
          .dispatch("GET_SIG", self.$store.state.common.DoctorId)
          .then(data => {
            self.statusFun(status);
          })
          .catch(() => {
            self.statusFun(0);
            self.$message({
              type: "error",
              message: "视频链接异常！"
            });
          });
      }
    },
    // 获取状态
    async getRpcTximOnlineFun() {
      let self = this;
      let response = await getRpcTximOnline({
        userId: localStorage.getItem("doctorId")
      });
      if (response.code == 200 && response.data) {
        self.DoctorSigFun(response.data.status);
      } else {
        self.statusFun(0);
        self.$message({
          type: "error",
          message: "系统出小差！"
        });
      }
    },
    // 定时更新医生状态
    async getRpcTximUpdateReidsFun() {
      let self = this;
      let response = await getRpcTximUpdateReids({
        userId: localStorage.getItem("doctorId")
      });
      if (response.code == 200) {
      } else {
        this.$message({
          type: "error",
          message: "系统出小差！"
        });
      }
    },
    /* 状态变更  end */

    /* 接诊操作  start */
    quitClick() {
      let self = this;
      self.incompleteClick("quit");
    },
    incompleteClick(type) {
      let self = this;
      if (self.$store.state.common.DoctorId) {
        if (self.$store.state.common.DoctorSig) {
          if (
            self.$store.state.common.STATE == 1 ||
            self.$store.state.common.STATE == 2 ||
            self.$store.state.common.STATE == 3
          ) {
            const baseConfirm = this.$baseConfirm({
              show: false,
              title: `确认${
                self.$store.state.common.STATE == 2 ? "开始" : "结束"
              }接诊？`,
              text: ``,
              confirmButton: {
                text: "确定",
                ontap: function() {
                  baseConfirm.close().then(function(res) {
                    if (self.$store.state.common.STATE == 2) {
                      self.getRpcTximUpdateStatusFun(1, type);
                    } else {
                      self.getRpcTximUpdateStatusFun(0, type);
                    }
                  });
                }
              },
              cancelButton: {
                text: "取消"
              }
            });
          } else {
            this.$message("正在接诊中，请先结束问诊");
          }
        } else {
          this.$message("腾讯服务异常！暂无法开始接诊");
        }
      } else {
        this.$message("医生状态异常！暂无法开始接诊");
        this.basePushFun("/login");
      }
    }
    /* 接诊操作  end */
  },
  beforeDestroy() {
    let self = this;
    clearInterval(self.RpcTximUpdateReidsTimer);
  }
};
</script>
<style scoped>
/* 接诊操作  start */
.incomplete_state {
  position: fixed;
  right: 0;
  bottom: 156px;
  width: 100px;
  height: 70px;
  background: rgba(255, 60, 60, 0.9);
  border-radius: 100px 1px 1px 100px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
}
.incomplete_state_start {
  background: rgba(255, 94, 41, 0.9) !important;
}
/* 接诊操作  end */
.home_aside_box {
  width: calc(100%);
  height: calc(100% - 41px);
  overflow: hidden;
  margin-top: 20px;
  border-radius: 4px;
  background: #ffffff;
}
.home_main_box {
  width: calc(100% - 20px);
  height: calc(100% - 41px);
  overflow: hidden;
  margin-top: 20px;
  border-radius: 4px;
  margin-right: 20px;
}
.home_mb_menu {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.home_mb_bd {
  width: calc(100%);
  height: calc(100% - 61px);
  overflow: hidden;
}
.home_aside {
  overflow: hidden;
  height: calc(100% - 1px);
  display: flex;
  justify-content: center;
  width: 1070px;
  margin-left: 20px;
}
.home_main {
  overflow: hidden;
  background-color: #f8f8f8;
  height: calc(100% - 1px);
  width: calc(100% - 1110px);
  position: relative;
}

.home_ct {
  height: calc(100vh - 60px);
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  background-color: #f8f8f8;
  position: relative;
}

.home_hd {
  height: 60px !important;
  background-color: #ffffff;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.home {
  width: 100%;
  overflow: hidden;
  background-color: #fff;
}
</style>
